<template>
	<view class="mine">
	
		<!-- <u-navbar leftIcon=" " title=" " bgColor="#000000" placeholder></u-navbar> -->
		<view class="mine-headr">
			<view class="mine-headr-setup">
				<image @click="toPage('/pages/Site/index')" src="@/static/images/login/myshezi.png" mode=""></image>
			</view>
			<view class="mine-headr-info">
				<view class="mine-headr-info-avatar">
					<u-avatar size="60" :src="userInfo.portrait" @tap="toPage('/pages/UserInfo/index')"></u-avatar>
				</view>
				<view class="mine-headr-info-text">
					<view class="mine-headr-info-text-name">
						<text>{{userInfo.nickname}}</text>
					</view>
				    <view class="mine-headr-info-text-qkl">
				    	<text class="u-line-1">{{userInfo.account_address|yingcang}}</text>
				    	<view class="copy" @click="copy">
							<image src="@/static/images/info/copy.png"  mode=""></image>
						</view>
				    </view>
				</view>
			</view>
			<view class="mine-tab">
				<view @click="toPages(item.url,index)" :style="index>0 ? 'margin-left: 21rpx;': ''"  class="mine-tab-item" v-for="(item , index) in tabslist" :key="index">
					<image :src="item.img" mode=""></image>
					<text>{{item.title}}</text>
				</view>
			</view>
		
			<!-- 全部  不需要显示 -->

		</view>
		<view class="collect">
				<view class="tf-Box-Bg">
					<view class="title_box">
						<view class="title">
							<u-tabs inactiveStyle="color: #777E90;" activeStyle="fontSize: 32rpx;color: #16172F;"  :list="tabList" @change="checked"></u-tabs>
						</view>
					</view>
				</view>
		</view>
		 <scroll-view  scroll-y="true" @scrolltolower="scrolltolower " class="collect-list">
			<!-- 我的藏品 -->
			<view v-if="active==0">
				<view class="cont">
					<!-- <block  :key="i"> -->
						<view class="cont-list" v-for="(l,i) in list" :key="i" @click="tomyinfo(l)">
							<view class="cont-list-shopImg">
								<u--image :src="l.thumb" :lazy-load="true" mode="aspectFill" :fade="true" duration="450" width='100%' height="450rpx"></u--image>
							    <view class="hecheng" v-if="l.synthes_status == 1 ">
									<text>可合成</text>
								</view>
							</view>
							<view class="cont-list-shopInfo">
								<view class="cont-list-shopInfo-name">
									<text>{{l.title}}</text>
								</view>
								<view class="cont-list-shopInfo-price" v-if="active!=1">
									<text>￥</text>
									<text>{{l.price}}</text>
								</view>
							</view>
							<view class="cont-list-status">
								<!-- <view class="cont-list-status-hecheng">
									<text>合成中…</text>
								</view> -->
								<view class="cont-list-status-num">
									<text>共{{l.goods_special_num}}个</text>
									<view class="boder" v-if="l.resale_num>=1"></view>
									<text v-if="l.resale_num>=1">{{l.resale_num}}个寄售中</text>
								</view>
							</view>
						</view>
				</view>
				<block v-if="total<1&&active === 0">
					<Empty text="暂无藏品"></Empty>
				</block>
				<view class="Isend" v-else-if="list.length==this.total&&this.total>2">
					已经到底了
				</view>
				<view class="Isend" @click="myGoodsList" v-else-if="list.length<this.total">
					下拉加载更多
				</view>
			</view>
			<!-- 我的盲盒 -->
			<view v-if="active==1">
				<view class="cont">
					<!-- <block  :key="i"> -->
						<view class="cont-list" v-for="(l,i) in list1" :key="i" @click="manheinfo(l)">
							<view class="cont-list-shopImg">
								<u--image :src="l.thumb" :lazy-load="true" mode="aspectFill" :fade="true" duration="450" width='100%' height="450rpx"></u--image>
							    <view class="hecheng" v-if="l.synthes_status == 1 ">
									<text>可合成</text>
								</view>
							</view>
							<view class="cont-list-shopInfo">
								<view class="cont-list-shopInfo-name">
									<text>{{l.title}}</text>
								</view>
								<view class="cont-list-shopInfo-price" v-if="active!=1">
									<text>￥</text>
									<text>{{l.price}}</text>
								</view>
							</view>
							<view class="cont-list-status">
								<!-- <view class="cont-list-status-hecheng">
									<text>合成中…</text>
								</view> -->
								<view class="cont-list-status-num">
									<text>共{{l.blind_box_count}}个</text>
									<view class="boder" v-if="l.resale_num>=1"></view>
									<text v-if="l.resale_num>=1">{{l.resale_num}}个寄售中</text>
								</view>
							</view>
						</view>
				</view>
				<block v-if="total1<1&&active === 1">
					<Empty text="暂无盲盒"></Empty>
				</block>
				<view class="Isend" v-else-if="list1.length==this.total1&&this.total1>2">
					已经到底了
				</view>
				<view class="Isend"  v-else-if="list1.length<this.total1">
					下拉加载更多
				</view>
			</view>
			<!-- <view v-if="active==1" class="box">
				<view class="item" @click="lookbox(item.id,item)" v-for="(item,i) in list1" :key="i">
					<view class="ts">盲盒未拆</view>
					<image :src="item.thumb" mode="aspectFill"></image>
					<view class="item_top">{{item.title}}</view>
					<view class="item_bottom">内有{{item.blindbox_count}}款藏品</view>
				</view>
			</view> -->
			<block v-if="active === 2">
				<Empty text="暂无数据"></Empty>
			</block>
			<block v-if="active === 3">
				<Empty text="暂无数据"></Empty>
			</block>
		<!-- 	<block v-if="total1<1&&active === 1">
				<Empty text="暂无盲盒"></Empty>
			</block> -->
		  </scroll-view>
		<!-- <view class="btoomm">
			<view class="jszc">
				<image src="@/static/images/logo.png" mode="aspectFit"></image>
				提供技术支持
			</view>
			<view class="bah">
				鄂ICP备2022006927号
			</view>
			<view class="wba">
				<image src="@/static/ico/wba.jpg" mode="aspectFit"></image>
				<view>鄂公网安备 42090202000521号</view>
			</view>
		</view> -->
		<!-- <Nav :curr='2'></Nav> -->
		<u-popup :show="show" mode="center" bgColor="transparent">
			<view class="show">
				<view class="show_top">
					<view class="show_title">{{actObj.title}}</view>
					<image :src="actObj.img" mode="aspectFit" class="showimg"></image>
					<view class="show_but" @click="chaibox(actObj.id)">
						立即拆开盲盒
					</view>
					<view class="show_tip">
						<!-- 打开有几率获得：猫猫，狗狗，熊熊，虎虎 -->
					</view>
				</view>
				<view class="show_close" @click="show=false">
					<image src="@/static/images/comimg/close.png"></image>
				</view>
			</view>
		</u-popup>
		<u-popup :show="show1" mode="center" bgColor="transparent" @close="page1=1;mymangGoodsList();">
			<view class="show">
				<view class="show_top">
					<view class="show_title1">恭喜你获得</view>
					<view class="show_title">{{box.title}}</view>
					<image :src="box.thumb" mode="aspectFill" class="showimg"></image>
					<view class="show_but" @click="next">
						继续拆开盲盒
					</view>
					<view class="show_tip">

					</view>
				</view>
				<view class="show_close" @click="show1=false">
					<image src="@/static/images/comimg/close.png"></image>
				</view>
			</view>
		</u-popup>
		<u-popup :show="Allshow" mode="bottom" round="16" bgColor="#1E2020" closeable @close="close">
			<view class="morelist">
				<view class="title">
					藏品列表
				</view>
				<view class="stop">
					<view class="l" @click="toSell(sell)">
						<view :class="sell?'no':'yes'"></view> 仅看空闲藏品
					</view>
					<view class="r">
						<view :class="types==1?'act':''" @click="toTypes(1)">
							按编号排序
						</view>
						<view :class="types==2?'act':''" @click="toTypes(2)">
							按价格排序
						</view>
					</view>
				</view>
				<scroll-view scroll-y class="draw-lots-list" @scrolltolower="Drawlist()">
					<view class="item" v-for="(item,index) in purchaselist" :key='index'>
						<view class="left">
							<view class="">
								<text class="tt1">
									#{{item.goodsCode}}/{{item.allCount}}
								</text>
								<text class="nzs" v-if="item.sell_status==1">转售中</text>
								<text class="zs" v-else>藏品</text>
							</view>
							<view class="tt2">
								链上标识:YY{{item.chain_mark}}
							</view>
						</view>
						<view class="right" @click="toget(item.goods_id)">
							<view class="tt1">
								¥{{item.price}}
							</view>
							<view class="tt2">
								售价
							</view>
							<image src="/static/ico/lr.png" mode="aspectFit" class="lr"></image>
						</view>
					</view>
				</scroll-view>
				<view class="more" v-if="totals>0" @tab="Drawlist">{{totals>purchaselist.length?'加载更多':'已加载全部'}}</view>
				<Empty v-if="purchaselist.length==0" text="暂无藏品"></Empty>
			</view>
		</u-popup>
		
		<u-popup :show="kshow" @close="kshow=false" :round="3">
		            <view class="manhe">
		               <view class="manhe-tips">
		               	   <view class="manhe-tips-num">
		               	   	    <text v-if="list1[0]">{{list1[0].title}}：共<text style="color: black;">{{myBlindBoxList.length}}</text>个</text>
		               	   </view>
						   <view class="manhe-tips-text">
						   	   <text>由价格从高到低排列</text>
						   </view>
		               </view>
					    <scroll-view  class="manhe-center" scroll-y="true" @scrolltolower="scrolltolower" >
					   	   <view class="manhe-center-list">
					   	   	  <view @click="blindBox(l)" class="manhe-center-list-item" v-for="(l,i) in myBlindBoxList" :key="i">
					   	   	  	  <text>¥{{l.price}}</text>
								  <view class="hecheng" v-if="l.resale_status == 1 ">
								  	<text>寄售</text>
								  </view>
					   	   	  </view>
					   	   </view>
						</scroll-view>
		            </view>
				</u-popup>
	    </view>
</template>

<script>
	import {
		mixin
	} from '@/Mixins/mixin.js'
	import Nav from "@/components/Nav.vue"
	import Empty from "@/components/Empty.vue"
	import qianbao from "@/static/images/info/qianbao.png"
	import dingda from "@/static/images/info/dingda.png"
	import jifen from "@/static/images/info/jifen.png"
	import {
		mapState,
		mapMutations
	} from 'vuex'
	export default {
		mixins: [mixin],
		components: {
			Nav,
			Empty
		},
		data() {
			return {
				box: {}, //拆除来的盲盒
				actObj: {},
				top: 0,
				page: 1,
				size: 10,
				list: [],
				total: 0,
				page1: 1,
				size1: 10,
				list1: [],
				total1: 0,
				active: 0,
				list0: [],
				show: false,
				show1: false,
				type: 1,
				purchaselist: '',
				pages: 1,
				totals: 0,
				Allshow: false,
				sell: true, // 1 true 全部 2 fales 空闲
				types: 1, // 1编号排序 2价格排序
				ids: '',
				kshow:false,
				tabList: [
					{name: '藏品'},
					{name: '盲盒'},
					{name:'元宇宙'},
					{name:'已发布'}
				],
				myBlindBoxList:[], // 盲盒单品价格列表
				tabslist:[{img:qianbao,title:'进入钱包',url:'/pages/wallet/myPurse'},{img:dingda,title:'全部订单',url:'/pages/Order/index'},{img:jifen,title:'积分活动'}]
			}
		},
		onShow() {
			this.page = 1
			this.page1 = 1
			this.getUser()
			if (this.active == 0) {
				this.myGoodsList();
			} else {
				this.mymangGoodsList();
			}
			uni.getSystemInfo({
				success: (e) => {
					this.top = e.statusBarHeight;
					console.log(this.top);
				}
			})
		},
		onLoad() {
			// uni.hideTabBar()
			// if (this.active == 0) {
			// 	this.myGoodsList();
			// } else {
			// 	this.mymangGoodsList();
			// }
		},
		computed: {
			...mapState(['userInfo', 'token'])
		},
		onPullDownRefresh() {
			this.getUser()
			// localStorage.setItem('active',e);
			if (this.active == 0) {
				this.page = 1
				this.myGoodsList();
			} else {
				this.page1 = 1
				this.mymangGoodsList();
			}
			// this.myGoodsList()
		},
		onReachBottom() {
			console.log('[触底]')
		},
		filters: {
			yingcang(val) {
				if (val) {
					let a = val.replace(/(\w{6})\w+(\w{4})/, "$1...$2");
					return a;
				} else {
					return "...";
				}
			},
		},
		methods: {
			scrolltolower(){
				if (this.active == 0 && this.total > this.list.length) {
					this.myGoodsList();
				}
				if (this.active == 1 && this.total1 > this.list1.length) {
					this.mymangGoodsList();
				}
			
			},
			tomyinfo(e) {
				// console.log(e.goods_special_num)
				// if (e.goods_special_num > 1) {
				// 	this.ids = e.special_id
				// 	this.getmylist()
				// } else {
					// this.toPage(`/subpage/Collection/details?id=${e.goods_id}`)
				// }
				this.toPage(`/subpage/Collection/details?id=${e.goods_id}&specialId=${e.special_id}`)
			},
		async manheinfo(e){
				 if(e.blind_box_count>1){
					 let res = await this.$http({
						 url:this.$api.myBlindBoxItems,
						 method:'get',
						 hideLoading: true,
						 data:{
							 blind_box_id:e.blind_box_id
						 }
					 })
					 if(res.code===200){
						 this.myBlindBoxList =  res.data
						 this.kshow = true
					 }
				 }else{
					 if(e.resale_status===1){
						 this.toPage(`/subpage/Product/boxDetails?id=${e.special_id}&order_id=${e.order_id}&type=1`)
					 }else{
						this.toPage(`/pages/airdrop/indexs?id=${e.blind_box_id}&order_id=${e.order_id}`) 
					 }
					 this.kshow = false
					 
				 }
				
			},
			blindBox(l){
				if(l.resale_status===1){
					this.toPage(`/subpage/Product/boxDetails?id=${l.special_id}&order_id=${l.order_id}&type=1`)
				}else{
					this.toPage(`/pages/airdrop/indexs?id=${l.blind_box_id}&order_id=${l.order_id}`)
				}
				this.kshow = false
			},
			async getmylist() {
				let data = await this.$http({
					url: this.$api.myShowList,
					method: 'get',
					hideLoading: true,
					data: {
						page: this.pages,
						page_size: 10,
						special_id: this.ids,
						type: this.types,
						sell_status: this.sell ? '1' : '2'
					}
				})
				let list = data.data.data
				if (data.code == 200) {
					if (this.pages == 1) {
						this.purchaselist = []
					}
					this.purchaselist = this.purchaselist.concat(list);
					this.totals = data.data.total
					this.Allshow = true;
				}
			},
			toget(e) {
				this.Allshow = false
				this.toPage('/subpage/Collection/details?id=' + e);
			},
			Drawlist() {
				console.log(this.purchaselist.length, this.totals);
				if (this.purchaselist.length < this.totals) {
					this.pages += 1
					this.getmylist()
				}
			},
			toSell(e) {
				this.sell = !e
				this.pages = 1
				this.getmylist()
			},
			toTypes(e) {
				this.types = e
				this.pages = 1
				this.getmylist()
			},
			close() {
				this.Allshow = false
			},
			jqqd() {
				this.$u.toast("敬请期待")
			},
			lookbox(id, item) {
				this.show = true;
				this.actObj = item;
				// this.$http({
				// 	url:this.$api.readmang,
				// 	method: 'POST',
				// 	hideLoading: true,
				// 	needToken:true,
				// 	data:{
				// 		id:id
				// 	}
				// }).then((res)=>{
				// 	console.log(res);
				// }).catch((err)=>{
				// 	console.log(err);
				// })

			},
			//继续拆
			next() {
				this.page1 = 1
				this.mymangGoodsList();
				this.show1 = false
			},
			chaibox(id, j) {
				if (j == 'continue') {

				} else {

				}
				this.$http({
					url: this.$api.openmang,
					method: 'POST',
					hideLoading: false,
					needToken: true,
					data: {
						id: id
					}
				}).then((res) => {
					// console.log(res);
					if (res.code == 200) {
						this.box = res.data
						this.show = false;
						this.show1 = true;
					} else {
						uni.showToast({
							title: res.msg,
							duration: 2000,
							icon: 'none'
						});
					}
				}).catch((err) => {
					console.log(err);
				})
				// setTimeout(()=>{
				// 	this.show1=true;
				// },0)
			},
			openmangfun(id) {

			},
			checked(e) {
				console.log(e);
				this.active = e.index;
				// localStorage.setItem('active',e);
				if (e.index == 0) {
					this.page = 1
					this.myGoodsList();
				}else if(e.index==1){
					this.page1 = 1
					this.mymangGoodsList();
				} else {
					this.page = 1;
					this.page1 = 1;
					// this.myGoodsList();
					// this.mymangGoodsList();
				} 
			},
			//复制
			copy() {
				uni.setClipboardData({
					data: this.userInfo.account_address,
					showToast: false,
					success: () => {
						console.log('success');
						this.$u.toast('内容已复制到剪切板')
					}
				});
			},
			async getUser() {
				let data = await this.$http({
					url: this.$api.getUser,
					method: 'POST',
					hideLoading: true,
					needToken: true,
					data: {}
				})
				// console.log('[用户信息]',JSON.stringify(data))
				if (data.code == 200) {
					this.$store.commit('ChangeUserInfo', data.data);
					// this.myGoodsList()
				}
			},
			//我的藏品
			async myGoodsList() {
				let data = await this.$http({
					url: this.$api.myGoodsList,
					method: 'GET',
					hideLoading: true,
					needToken: true,
					data: {
						page: this.page,
						page_size: this.size,
					}
				})
				// console.log('[我的藏品]',JSON.stringify(data))
				if (data.code == 200) {
					if (this.page == 1) {
						this.list = []
						this.list0.concat(data.data.data);
					}
					this.total = data.data.total
					if (this.list.length < data.data.total) {
						this.list = this.list.concat(data.data.data)
						this.page += 1
					}
				}
			},
			//我的盲盒
			async mymangGoodsList() {
				let data = await this.$http({
					url: this.$api.mymangGoodsList,
					method: 'GET',
					hideLoading: true,
					needToken: true,
					data: {
						page: this.page1,
						page_size: this.size1,
					}
				})
				console.log('[我的盲盒]', JSON.stringify(data))
				if (data.code == 200) {
					if (this.page1 == 1) {
						this.list1 = [];
						this.list0.concat(data.data.data);
					}
					this.total1 = data.data.total
					if (this.list1.length < data.data.total) {
						this.list1 = this.list1.concat(data.data.data)
						this.page1 += 1
					}
				}
			},
			toPages(url,i){
				let userInfo = uni.getStorageSync('userInfo');
                if(url){
					if(userInfo.real_name_status!=2){
						uni.showToast({
						    title: '您还没有实名认证！',
							icon:'none'
						});
						setTimeout(()=>{
							uni.navigateTo({
								url:'/subpage/Verified/index'
							})
							
						},1500)
						
						return
					}
					if(i==0&&userInfo.wallet_status==0){
						uni.showToast({
						    title: '您没有开通钱包！',
							icon:'none'
						});
						setTimeout(()=>{
							uni.navigateTo({
								url:'/pages/wallet/openWallet'
							})
							
						},1500)
					}else{
						uni.navigateTo({
							url:url
						})
					}
					
				}else{
					uni.showToast({
					    title: '开发中！',
						icon:'none'
					});
				}
				
				
			},
		


		}
	}
</script>

<style lang="scss" scoped>
	.dfc {
		display: flex;
		align-items: center;
		justify-content: space-between;
	}

	// /deep/.u-mode-center-box
	/deep/.u-popup__content[data-v-52d4ddd1] {
		background-color: transparent !important;
	}

	.Isend {
		font-size: 28rpx;
		font-weight: 400;
		color: #808080;
		line-height: 36rpx;
		text-align: center;
		margin: 16rpx;
	}
    .heard-img{

	}
	.mine {
		background-color: #fff;
		&-headr{
			width: 100vw;
			// height: 547rpx;
			background-image: url('@/static/images/login/myHeadr.png');
			background-size: 100% 100%;
			padding-bottom: 30rpx;
		    &-setup{
				width: 42rpx;
				height: 42rpx;
				float: right;
				margin: 128rpx 48rpx 0 0;
				image{
					width: 100%;
					height: 100%;
				}
			}
			&-info{
				margin-left: 44rpx;
				display: flex;
				align-items: center;
				padding-top: 148rpx;
				&-text{
					margin-left: 28rpx;
					&-name{
						font-size: 40rpx;
						font-family: PingFangSC-Semibold, PingFang SC;
						font-weight: 600;				
                        color: #FFFFFF;
					}
					&-qkl{ 
						display: flex;
						font-size: 24rpx;
						font-family: PingFangSC-Regular, PingFang SC;
						font-weight: 400;
						color: #B4B7BC;
						.copy { 
							width: 18rpx;
							height: 20rpx;
							margin-bottom: 4rpx;
							margin-left: 12rpx;
							image{
								width: 18rpx;
								height: 20rpx;
							}
							// background-image: url(@/static/images/info/copy.png);
							// background-size: 100% 100%;
						}
					}
				}
			}
		}
		&-tab{
			width: calc(100vw - 60rpx);
			
			height: 108rpx;
			// background: #FFFFFF;
			border-radius: 4rpx;
			margin: auto;
			// margin-top: -40rpx;
			margin-top: 44rpx;

			display: flex;
			align-items: center;
			justify-content: center;
			&-item{
				// opacity: 0.4;
				padding: 16rpx 0;
				border: 1rpx solid #71767E;
				width: calc((100vw - 30rpx - 30rpx - 42rpx) / 3);
				border-radius: 4rpx;
				display: flex;
				align-items: center;
				justify-content: center;
				
				image{
					width: 48rpx;
					height: 48rpx;
				}
				text{
					margin-left: 14rpx;
					font-size: 26rpx;
					font-family: PingFangSC-Regular, PingFang SC;
					font-weight: 400;
					color: #FFFFFF;
				}
			}
		}
        

		.mine_top_top_right {
			
		
			display:flex;
			justify-content: flex-end;

			margin-top: -20rpx;
			image {
				margin: 40rpx 48rpx 0 0;
				width: 64rpx;
				height: 64rpx;
				// margin-right: 30rpx;
			}
		}

		.show {
			// height: 735rpx;
			display: flex;
			flex-direction: column;
			align-items: center;
			// justify-content: center;
			background: transparent;

			.show_top {
				width: 634rpx;
				height: 715rpx;
				background: #FFF;
				border-radius: 20rpx;
				flex-direction: column;
				align-items: center;
				// justify-content: center;
				display: flex;
				padding: 20rpx;

				.show_title1 {
					font-size: 38rpx;
					font-family: Microsoft YaHei;
					font-weight: 400;
					color: #F2CAA6;
					line-height: 36rpx;
					margin-bottom: 31rpx;
					margin-top: 30rpx;
				}

				.show_title {
					font-size: 56rpx;
					font-family: Microsoft YaHei;
					font-weight: 400;
					color: #000;

				}

				.showimg {
					width: 314rpx;
					height: 314rpx;
					background: #FFFFFF;
					border-radius: 50rpx;
					margin: 51rpx 0 34rpx 0;
				}

				.show_but {
					width: 273rpx;
					height: 74rpx;
					background: #000;
					color: #FFF;
					border-radius: 37rpx;
					text-align: center;
					line-height: 74rpx;
				}

				.show_tip {
					font-size: 24rpx;
					font-family: Microsoft YaHei;
					font-weight: 400;
					color: #000;
					line-height: 18px;
					margin-top: 48rpx;
				}
			}

			.show_close {
				margin-top: 26rpx;
				width: 58rpx;
				height: 59rpx;

				image {
					// width: 58rpx;
					// height: 59rpx;
					// background:pink;
					// margin:0 auto;
					width: 100%;
					height: 100%;

				}
			}
		}

		.userinfo {
			position: relative;
			padding: 30rpx;
			// background-color: #222222;
			background: linear-gradient(181deg, #EBF0F8 0%, #F7F8FA 100%);
			height: 450rpx;
			align-items: flex-start;

			// background:linear-gradient(130deg, #33373A 0%, #1E2020 100%, 100%);
			// background:linear-gradient(130deg, #292c2d 0%,#202222 100%);
			.user {
				margin-top: 80rpx;
				margin-left: 20rpx;

				.u-avatar {
					border: 4rpx solid #fff;
				}

				.cont {
					margin-left: 26rpx;

					.name {
						font-size: 40rpx;
						font-weight: 600;
						color: #101010;
					}

					.address {
						margin-top: 12rpx;
						font-size: 24rpx;
						// font-weight: 600;
						color: #777E90;

						text {}

						
					}
				}
			}
			.tabs {
				width: 690rpx;
				// height: 180rpx;
				position: absolute;
				left: 50%;
				bottom: 50rpx;
				transform: translateX(-50%);
				box-sizing: border-box;
				padding: 30rpx;
				background-color: #FFF;
				// box-shadow: 0px 2px 8px 0px rgba(204, 204, 204, 0.5);
				border-radius: 20rpx;
				// border: 1rpx solid #F5F5FA;
				.item {
					text-align: center;
					position: relative;
					min-width: 80rpx;
					width: 150rpx;
			
					// border:1px solid #fff;
					.title {
						font-size: 28rpx;
						// font-weight: 600;
						color: #8C8C8C;
					}
			
					&:nth-child(1) {
						image {
							width: 56rpx;
							height: 56rpx;
						}
					}
			
					&:nth-child(2) {
						image {
							width: 56rpx;
							height: 56rpx;
						}
					}
			
					&:nth-child(3) {
						image {
							width: 56rpx;
							height: 56rpx;
						}
					}
			
					&:nth-child(4) {
						image {
							width: 56rpx;
							height: 56rpx;
						}
					}
			
					&:nth-child(5) {
						image {
							width: 56rpx;
							height: 56rpx;
						}
					}
				}
			}
		}

		

		.tabs1 {
			background: red;
			padding: 30rpx;
			background-color: #000000;

			.item {
				text-align: center;
				position: relative;
				min-width: 80rpx;
				width: 150rpx;

				// border:1px solid #fff;
				.title {
					font-size: 28rpx;
					font-weight: 600;
					color: #8C8C8C;
				}

				&:nth-child(1) {
					image {
						width: 42rpx;
						height: 42rpx;
					}
				}

				&:nth-child(2) {
					image {
						width: 42rpx;
						height: 42rpx;
					}
				}

				&:nth-child(3) {
					image {
						width: 38rpx;
						height: 42rpx;
					}
				}

				&:nth-child(4) {
					image {
						width: 38rpx;
						height: 10rpx;
					}
				}
			}
		}

		.collect {
			// padding: 30rpx;
			// margin-top: 60rpx;
			// background: #FFFFFF;
			// height:calc(60vh - 40rpx);
            // margin-top: 40rpx;
			.tf-Box-Bg {
				padding: 10rpx 30rpx;
				// background: #FFFFFF;

				.collect_box {
					display: flex;
					justify-content: space-between;
				}
			}

			.collect_title {
				color: #fff;
				font-size: 32rpx;
				font-weight: 600;
				color: #333;
				line-height: 44rpx;
				margin-bottom: 26rpx;
			}

			.title_box {
				display: flex;
				justify-content: space-between;
				align-items: center;

				.title {
					font-size: 32rpx;
					font-weight: 600;
					color: #C1C1C1;

					text {
						font-size: 24rpx;
						font-weight: bold;
						color: #C1C1C1;
						// margin-right:33rpx;
						display: inline-block;
						width: 110rpx;
						height: 60rpx;
						background: transparent;
						text-align: center;
						line-height: 60rpx;
					}

					.active {
						color: #000;
						border-radius: 4px;
						background: #DDD;
						;
					}
				}

				.tighr {
					display: flex;
					align-items: center;
				}

				.title_right {
					width: 102rpx;
					height: 48rpx;
					margin-left: 10rpx;
					text-align: center;
					line-height: 48rpx;
					font-size: 24rpx;
					font-weight: 600;
					color: #000;
					background: #DDDDDD;
					border-radius: 100px;
				}

			}

			.title {
				font-size: 24rpx;
				font-weight: 600;
				color: #C1C1C1;
				background: #00000000;
				border-radius: 8rpx;

				span {
					font-size: 24rpx;
					font-weight: bold;
					color: #c1c1c1;
					display: inline-block;
					width: 110rpx;
					height: 60rpx;
					border-radius: 8rpx;
					text-align: center;
					line-height: 60rpx;
				}

				.active {
					color: #fff;
					background: #898989;
				}
			}



			.box {
				// min-height:100vh;
				display: flex;
				flex-wrap: wrap;
				flex-direction: row;
				// justify-content: space-between;
				align-items: left;
				padding: 10rpx 30rpx;
				width: 100%;

				.item {
					width: calc(50% - 45rpx);
					height: 439rpx;
					background: #FFF;
					border-radius: 30rpx;
					display: flex;
					flex-direction: column;
					align-items: left;
					position: relative;
					margin-top: 20rpx;
                    &-shopimg{
						width: 100%;
						height: 100%;
						overflow: hidden;
						image{
							width: calc(50vw - 45rpx);
							height: 323rpx;
						}
					}
					// border: 1px solid #007AFF;
					// image {
					
					// 	background: #FAEBCC;
					// 	border-radius: 30rpx 30rpx 30rpx 30rpx;
					// }

					.item_top {
						text-align: left;
						font-size: 28rpx;
						font-family: Microsoft YaHei;
						font-weight: 600;
						color: #000;
						padding-left: 33rpx;
						padding-right: 33rpx;
						// line-height: 36rpx;
						margin-top: 16rpx;
					}

					.item_bottom {
						text-align: left;
						color: #222;
						font-size: 24rpx;
						font-family: Microsoft YaHei;
						font-weight: 400;
						padding-left: 33rpx;
						padding-right: 33rpx;
						margin-top: 17rpx;
					}
				}

				.item:nth-child(even) {
					margin-left: 27rpx;
				}
			}

			.ts {
				min-width: 90rpx;
				height: 48rpx;
				background: rgba(0, 0, 0, 0.3);
				border-radius: 24rpx;
				opacity: 0.8;
				padding: 0 10rpx;
				position: absolute;
				top: 18rpx;
				left: 16rpx;
				z-index: 1;
				color: #FFFFFF;
				display: flex;
				align-items: center;
				justify-content: center;
				font-size: 24rpx;
			}

			.add {
				display: flex;
				position: absolute;
				min-width: 40rpx;
				height: 40rpx;
				top: 18rpx;
				right: 16rpx;
				background: rgba(0, 0, 0, 0.3);
				z-index: 1;
				color: #FFFFFF;
				font-size: 28rpx;
				justify-content: center;
				align-items: center;
			}

			.tys {
				position: absolute;
				border-radius: 8rpx;
				bottom: 10rpx;
				left: 16rpx;
				display: flex;
				align-items: center;
				z-index: 1;

				.txt {
					border-radius: 4rpx;
					width: 60rpx;
					height: 30rpx;
					padding: 5rpx;
					color: #FFF;
					// background: #000;
					display: flex;
					align-items: center;
					justify-content: center;
					font-size: 24rpx;
					margin-right: 10rpx;
					background: #468EFF;
					border-radius: 6rpx;
					backdrop-filter: blur(5rpx);
				}

				.txt:nth-child(2n) {
					background: #50E3C2;
					color: #FFF;
				}
			}
		}

		::v-deep .u-badge {
			right: 0;
			top: -10rpx;
		}

		.btoomm {
			margin: 30rpx auto;

			.jszc {
				display: flex;
				align-items: flex-end;
				justify-content: center;
				color: #939393;
				font-size: 32rpx;

				image {
					height: 65rpx;
					width: 65rpx;
					margin-right: 10rpx;
				}
			}

			.wba {
				display: flex;
				align-items: center;
				justify-content: center;
				color: #939393;
				font-size: 28rpx;
				margin: 30rpx auto;

				image {
					height: 35rpx;
					width: 35rpx;
					margin-right: 10rpx;
				}

				text {
					color: #939393;
					font-size: 28rpx;
				}
			}

			.bah {
				color: #C0C0C0;
				font-size: 26rpx;
				text-align: center;
				margin-top: 20rpx
			}
		}

		.morelist {
			height: 80vh;
			overflow: auto;
			background: #FFFFFF;
			border-radius: 32rpx 32rpx 0px 0px;
			padding: 26rpx;

			.title {
				font-size: 32rpx;
				margin: 20rpx 0;
				font-weight: 600;
				color: #333333;
				line-height: 44rpx;
			}

			.stop {
				display: flex;
				justify-content: space-between;
				align-items: center;
				margin-bottom: 10rpx;

				.l {
					display: flex;
					align-items: center;
					font-size: 24rpx;
					font-weight: 400;
					color: #A0A0A0;
					line-height: 34rpx;

					.no {
						width: 32rpx;
						height: 32rpx;
						border-radius: 4rpx;
						border: 2rpx solid #DDDDDD;
						margin-right: 10rpx;
					}

					.yes {
						width: 32rpx;
						height: 32rpx;
						border-radius: 4rpx;
						background: #F2E0BC;
						border: 2rpx solid #F2E0BC;
						margin-right: 10rpx;
					}
				}

				.r {
					display: flex;
					justify-content: space-between;
					min-width: 338rpx;
					height: 60rpx;
					background: #F7F7FA;
					border-radius: 8rpx;
					font-size: 24rpx;
					font-weight: 600;
					line-height: 34rpx;
					color: #C1C1C1;
					text-align: center;
					line-height: 60rpx;

					view {
						width: 164rpx;
					}

					.act {
						width: 164rpx;
						color: #333333;
						height: 60rpx;
						background: #DDDDDD;
						border-radius: 8rpx;
					}
				}
			}

			.draw-lots-list {
				height: 68vh;

			}

			.more {
				font-size: 24rpx;
				font-weight: 600;
				color: #C1C1C1;
				text-align: center;
			}

			.item {
				display: flex;
				justify-content: space-between;
				align-items: center;
				margin: 20rpx 0;
				padding-bottom: 20rpx;
				border-bottom: 1px solid #F5F5F5;

				.left {
					.tt1 {
						font-size: 28rpx;
						font-weight: 600;
						color: #333333;
						line-height: 40rpx;
						margin-right: 10rpx;
					}

					.zs {
						min-width: 54rpx;
						height: 28rpx;
						background: #000000;
						border-radius: 4rpx;
						font-size: 20rpx;
						text-align: center;
						font-weight: 600;
						padding: 0 10rpx;
						color: #FFFFFF;
						line-height: 28rpx;
					}

					.nzs {
						min-width: 54rpx;
						height: 28rpx;
						padding: 0 10rpx;
						background: #B6B6B6;
						border-radius: 4px;
						text-align: center;
						font-size: 20rpx;
						font-weight: 600;
						color: #FFFFFF;
						line-height: 28rpx;
					}

					.tt2 {
						font-size: 24rpx;
						font-weight: 600;
						color: #C1C1C1;
						line-height: 34rpx;
						margin-top: 10rpx;
					}
				}

				.right {
					position: relative;
					padding-right: 36rpx;

					.tt1 {
						font-size: 24rpx;
						font-weight: bold;
						color: #333333;
						line-height: 28rpx;
						text-align: right;
					}

					.tt2 {
						font-size: 24rpx;
						font-weight: 600;
						color: #C1C1C1;
						line-height: 34rpx;
						margin-top: 10rpx;
						text-align: right;
					}

					.lr {
						position: absolute;
						right: 0;
						top: 50%;
						transform: translateY(-50%);
						height: 24rpx;
						width: 14rpx;
					}
				}
			}
		}
	}
	
	.collect-list{
		height: calc(100vh - 565rpx);
		width: 100vw; 
		overflow-y: auto;
		// margin-top: 30rpx;
		// margin-bottom: 40rpx;
		.cont{
			// padding: 0 0 0 15rpx;
			display: flex;
			flex-wrap: wrap;
			// justify-content:space-evenly;
			&-list{
				margin-top: 20rpx;
				width: calc(50vw - 45rpx);
				margin-left: 30rpx;
				// height: 400rpx;
				// background-color: red;
				&-shopImg{
					width: 100%;
					position: relative;
					.hecheng{
						position: absolute;
						width: 120rpx;
						height: 44rpx;
						background-image: url(@/static/images/info/hecheng.png);
						background-size: 100% 100%;
						top: 0;
						right: 0;
						font-size: 24rpx;
						font-family: PingFangSC-Medium, PingFang SC;
						font-weight: 500;
						color: #FFFFFF;
						display: flex;
						align-items: center;
						text{
							margin-left: 36rpx;
							
						}
					}
				}
				&-shopInfo{
					margin-top: 12rpx;
					display: flex;
					align-items: center;
					justify-content: space-between;
					&-name{
						width: 60%;
						overflow: hidden;				
                        text-overflow:ellipsis;
						white-space:nowrap;
						font-size: 28rpx;
						font-family: PingFangSC-Medium, PingFang SC;
						font-weight: 500;
						color: #16172F;
					}
					&-price{
						display: flex;
						align-items: center;
						text:nth-child(1){
							font-size: 20rpx;
							font-family: DINAlternate-Bold, DINAlternate;
							font-weight: bold;
							color: #16172F;
						}
						text:nth-child(2){
							font-size: 30rpx;
							font-family: DINAlternate-Bold, DINAlternate;
							font-weight: bold;
							color: #16172F;
						}
					}
				}
				// margin-left:15rpx;
			    &-status{
					&-hecheng{
						text{
							font-size: 26rpx;
							font-family: PingFangSC-Regular, PingFang SC;
							font-weight: 400;
							color: #468EFF;
						}
					}
					&-num{
						display: flex;
						align-items: center;
						text:nth-child(1){
							font-size: 26rpx;
							font-family: PingFangSC-Regular, PingFang SC;
							font-weight: 400;
							color: #777E90;
						}
						.boder{
							margin: 0 12rpx;
							width: 1rpx;
							height: 18rpx;
							background: #A1A1AB;
							border-radius: 2px;
						    margin-top: 6rpx;
						}
						text:nth-child(3){
							font-size: 24rpx;
							font-family: PingFangSC-Regular, PingFang SC;
							font-weight: 400;
							color: #777E90;
						}
					}
				}
			}
		}
	}
	.manhe{
		width: 100vw;
		height: 356rpx;
		background: #FFFFFF;
		&-tips{
			width: calc(100% - 60rpx);
			height: 60rpx;
			background: #F7F8FA;
			border-radius: 3px;
			margin: auto;
			margin-top: 46rpx;
			display: flex;
			justify-content: space-between;
			&-num{
				margin-left: 16rpx;
				font-size: 24rpx;
				font-family: PingFangSC-Regular, PingFang SC;
				font-weight: 400;
				color: #8C93AA;
				line-height: 60rpx;
			}
			&-text{
				font-size: 24rpx;
				font-family: PingFangSC-Regular, PingFang SC;
				font-weight: 400;
				color: #8C93AA;
				line-height: 60rpx;
				margin-right: 16rpx;
			}
		}
		&-center{
			width: 100vw;
			height: calc(356rpx - 123rpx);
			overflow-y: auto;
			&-list{
				display: flex;
				flex-wrap: wrap;

				&-item{
					position: relative;
					margin-top: 17rpx;
					width: calc((100vw - 60rpx - 30rpx - 18rpx) / 3);
					height: 88rpx;
					border-radius: 4px;
					border: 1px solid #E0E6F0;
					margin-left: 15rpx;
					// text-align: center;
					display: flex;
					align-items: center;
					justify-content: flex-start;
					text{
					    margin-left: 24rpx;
						font-size: 28rpx;
						font-family: DINAlternate-Bold, DINAlternate;
						font-weight: bold;
						color: #16172F;
					}
					.hecheng{
						position: absolute;
						width: 96rpx;
						height: 40rpx;
						background-image: url(@/static/images/info/jishouthree.png);
						background-size: 100% 100%;
						top: 0;
						right: 0;
						font-size: 24rpx;
						font-family: PingFangSC-Medium, PingFang SC;
						font-weight: 500;
						color: #FFFFFF;
						display: flex;
						align-items: center;
						text{
							margin-left: 36rpx;
							font-size: 24rpx;
							font-family: PingFangSC-Medium, PingFang SC;
							font-weight: 500;
							color: #FFFFFF;
						}
					}
				}
			}
			
		}
		
	}
	::v-deep .u-navbar__content__right{
		padding:0 !important;
	}
</style>
